<template>
    <div>
        <el-dialog  :title="props.isAdd?'添加管理员':'编辑管理员'" v-model="props.isShow" center :before-close="beforeClose">
            <el-form :model="userForm" ref="userRef" :rules="rules"> 
                <el-form-item label="所属角色" :label-width="formLabelWidth">
                    <el-select  v-model="userForm.roleid">
                        <el-option v-for="item in store.getters['role/getRole']"  :key="item.id"  :label="item.rolename"
                        :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
                    <el-input autocomplete="off" v-model="userForm.username" />
                </el-form-item>
                <el-form-item  label="密码" :label-width="formLabelWidth">
                    <el-input autocomplete="off"  v-model="userForm.password"/>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="userForm.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        :active-value="1" :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="cancel(userRef)">取消</el-button>
                    <el-button type="primary" @click="confirm(userRef)">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang='ts' setup>
import { ref,defineProps,defineEmits ,reactive} from 'vue'
// 引入规则验证
import { FormRules, FormInstance, ElMessage} from 'element-plus'
//// 引入角色仓库
import {useStore} from 'vuex'
import { userAdd } from '@/request/api'
let emit=defineEmits(['cancel'])
let userRef=ref<FormInstance>()
let store=useStore()
// 调用仓库用户列表
const getUser = ()=>{
  store.dispatch('user/getUserAction')
}

// 调用仓库角色列表
const getRole=()=>{
    store.dispatch('role/getRoleAction')  
}
getRole()

const formLabelWidth = '120px'
// props接收
let props=defineProps({
    isShow:Boolean,
    isAdd:Boolean
})
// 定义表单
const userForm = ref({
    roleid: '',//角色编号number
    username: '',//管理员名称string
    password: '',//密码string
    status: 1,//状态  1正常2禁用number
})
// 规则验证
const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
        { min: 2, max: 8, message: 'Length should be 2 to 8', trigger: 'blur' },
    ],
})
// 取消事件
const cancel = (formEl: FormInstance | undefined) => {
    emit('cancel', false)
    if (!formEl) return
    // 清除规则验证
    formEl.resetFields()
}
// 关闭x
const beforeClose = (done: () => {}) => {
    done()
    cancel(userRef.value)
}
// 确认事件
const confirm =async (formEl: FormInstance | undefined)=>{
    if(!formEl) return 
    await formEl.validate(val=>{
        if(val){
            // console.log(userForm.value);
            if(props.isAdd){
                userAdd(userForm.value).then(res=>{
                    if(res.code==200){
                        ElMessage.success(res.msg)
                        // 弹框关闭
                        cancel(userRef.value)
                        // 重新调用列表
                        getUser()
                    }else{
                        ElMessage.error(res.msg) 
                    }
                })
            }
            
        }
    })

}
</script>
<style scoped></style>